<template>
	<view class="pagebox">
		<view class="titleline">基础任务清单执行情况</view>
		<view class="numberline">No:{{yzinfo.id}}时间: {{ planinfo.createTime }}</view>
		<view class="infobox">
			<view class="line"></view>
			<view class="info">
				<view class="iteminfo">
					<view class="label">姓名:</view>
					<view class="value">{{ yzinfo.yzName || '' }}</view>
				</view>
				<view class="iteminfo">
					<view class="label">性别:</view>
					<view class="value">{{ yzinfo.yzSex || '' }}</view>
				</view>
				<view class="iteminfo">
					<view class="label">年龄:</view>
					<view class="value">{{ yzinfo.yzAge || '' }}</view>
				</view>
				<view class="iteminfo">
					<view class="label">病症:</view>
					<view class="value">{{ yzinfo.yzDepartment || '' }}</view>
				</view>
			</view>
		</view>
		<view class="contentbox">
			<view class="name">方案详情：</view>
			<!-- <view class="content">{{ formattedContent }}</view> -->
			<view class="form-item">
			  <textarea
			    class="put"
			    v-model="rawContent"
			    placeholder="请输入您的内容"
			    :auto-height="true"
			    :show-confirm-bar="false"
			    :disable-default-padding="true"
			    :adjust-position="true"
			    maxlength="-1"
				disabled
			  />
			</view>
		</view>

		<view class="listenbtn" v-show="!playshow" @click="startliston">听</view>

		
		<view class="playbox" v-if="playshow">
			
			<button @click="playMusic" :disabled="isPlaying">播放</button>
			    <button @click="pauseMusic" :disabled="!isPlaying">暂停</button>
			    <button @click="stopMusic">停止</button>
		</view>
		
		  
		

		<view class="playwin" v-if="play">
			<view class="listen">听</view>
			<view class="iconfont icon-xiangyou2 playbt"></view>
			<view class="iconfont icon-guanbi closebt" @click="closeplay"></view>
		</view>

		<view class="winpage" v-if="timewin">
			<view class="timewin">
				<view class="iconfont icon-xiangxia2" @click="timewin = false"></view>
				<view class="timebox">
					<view class="itemtime">播完当前</view>
					<view class="itemtime">15分钟</view>
					<view class="itemtime">30分钟</view>
					<view class="itemtime">45分钟</view>
					<view class="itemtime">60分钟</view>
					<view class="itemtime">90分钟</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { medicalOrderDetail } from '../../utils/api.js'
export default {
	data() {
		return {
			playshow: false,
			play: false,
			timewin: false,
	        isPlaying: false,
			timer: null,
			planinfo: {},
			yzinfo: {},
			rawContent: ''
		}
	},
/* 	computed: {
		formattedContent() {
			return this.rawContent.replace(/←/g, '\n')
		}
	}, */
	onLoad(e) {
		
		let p = { yzId: e.id }
		medicalOrderDetail(p).then(res => {
			console.log(res, '医嘱详情')
			this.planinfo = res.data.data.planInfo[0]
			this.yzinfo = res.data.data.yzInfo
			this.rawContent = res.data.data.planInfo[0].orContent

			// ✅ 修复：去掉 URL 中的多余空格！
			const audioUrl = 'https://changban.dianjingkeji.net'+ res.data.data.yzInfo.yzFile
			this.src = audioUrl
})

	},

	methods: {
		startliston(){
			if(!this.yzinfo.yzFile){
				uni.showToast({
					title: '播客生成中。。。',
					icon:'none',
					duration: 2000
				});

			}else{
				this.playshow=true
			}
		},
		playMusic() {
		      const bgAudioManager = uni.getBackgroundAudioManager();
		
		      // 设置音乐信息
		      bgAudioManager.title = '医嘱详情';
		      bgAudioManager.singer = '暂无';
		      bgAudioManager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
		      bgAudioManager.src = this.src;
		
		      // 可选：监听播放事件
		      bgAudioManager.onPlay(() => {
		        console.log('音乐开始播放');
		        this.isPlaying = true;
		      });
		
		      bgAudioManager.onPause(() => {
		        console.log('音乐暂停');
		        this.isPlaying = false;
		      });
		
		      bgAudioManager.onStop(() => {
		        console.log('音乐停止');
		        this.isPlaying = false;
		      });
		
		      bgAudioManager.onError((res) => {
		        console.error('音乐播放出错：', res);
		        uni.showToast({
		          title: '播放失败',
		          icon: 'error'
		        });
		      });
		    },
		
		    pauseMusic() {
		      const bgAudioManager = uni.getBackgroundAudioManager();
		      bgAudioManager.pause();
		    },
		
		    stopMusic() {
		      const bgAudioManager = uni.getBackgroundAudioManager();
		      bgAudioManager.stop();
			  this.playshow=false
		    }
	}
}
</script>

<style lang="less" scoped>
.pagebox {
	width: 750rpx;
	padding: 20rpx;
	padding-bottom: 200rpx;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%, rgba(255,255,255,0) 76%);
	box-sizing: border-box;

	.titleline {
		font-size: 34rpx;
		font-weight: bold;
		line-height: 2.8;
	}
	.numberline {
		font-size: 26rpx;
		font-weight: bold;
	}
	.infobox {
		width: 100%;
		border-top: 8rpx solid #1a4f8a;
		margin-top: 30rpx;
		.line {
			width: 100%;
			height: 2rpx;
			background-color: #1a4f8a;
			margin-top: 4rpx;
		}
		.info {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.iteminfo {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-weight: bold;
				line-height: 2.5;
				width: 33%;
				.label { text-align: left; }
				.value { color: #1a4f8a; }
			}
		}
	}
	.contentbox {
		width: 100%;
		background-color: white;
		border-radius: 20rpx;
		margin-top: 20rpx;
		font-weight: bold;
		.name { line-height: 2.2; }
		.form-item {
		  width: 100%;
		  padding: 20rpx;
		  box-sizing: border-box;
		}
		
		.put {
		  width: 100%;
		  min-height: 200rpx;
		  font-size: 28rpx;
		  line-height: 1.6;
		  padding: 20rpx;
		  background-color: #fff;
		  border-radius: 16rpx;
		  border: 1px solid #eee;
		  box-sizing: border-box;
		  word-wrap: break-word;
		  word-break: break-all;
		  white-space: pre-wrap;
		}
	}

	.listenbtn {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		color: white;
		font-size: 34rpx;
		font-weight: bold;
		position: fixed;
		right: 50rpx;
		top: 45vh;
		background-color: #ACACAC;
		line-height: 100rpx;
		text-align: center;
		  z-index: 9999; /* 👈 设置在父容器上，更可靠 */
	}

	/* 音频播放器区域 */
	.audio-player {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background: white;
		padding: 20rpx;
		box-sizing: border-box;
		.progress {
			display: flex;
			align-items: center;
			.time {
				font-size: 24rpx;
				color: #666;
				width: 80rpx;
				text-align: center;
			}
			.slider {
				flex: 1;
				margin: 0 10rpx;
			}
		}
		.controls {
			margin-top: 20rpx;
			button {
				width: 100%;
			}
		}
	}
   .playbox{
	   width: 100%;
	   display: flex;
	   align-items: center;
	   position: fixed;
	   background-color: white;
	   bottom: 30rpx;
	   left: 0;
	     z-index: 9999; /* 👈 设置在父容器上，更可靠 */
	   button{
		   padding: 0 50rpx;
		   background-color: #0099ff;
		   color: white;
	   }
   }
	/* 其他样式保持不变 */
	.playwin {
		width: 280rpx;
		height: 100rpx;
		background-color: #ACACAC;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		position: fixed;
		justify-content: space-between;
		left: 50rpx;
		top: 45vh;
		.listen {
			width: 100rpx;
			height: 100rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			border: 8rpx solid whitesmoke;
			text-align: center;
			line-height: 90rpx;
			background-color: #1a4f8a;
			color: white;
		}
		.playbt {
			color: white;
			font-size: 60rpx;
		}
		.closebt {
			margin-right: 30rpx;
		}
	}
	.winpage {
		width: 100vw;
		height: 100vh;
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		.timewin {
			width: 750rpx;
			height: 350rpx;
			background-color: white;
			position: absolute;
			left: 0;
			bottom: 0;
			padding: 20rpx;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			text-align: center;
			.iconfont {
				margin: auto;
				width: 100%;
			}
			.timebox {
				width: 100%;
				height: 80%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				margin-top: 20rpx;
				.itemtime {
					width: 180rpx;
					border: 1rpx solid gray;
					border-radius: 10rpx;
					height: 50rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 50rpx;
				}
			}
		}
	}
}
</style>